<template>
	<div id="home-view">
		<van-nav-bar title="心心精洗" />
		<div class="swipe-titile">
			<van-swipe class="my-swipe" :autoplay="2000" indicator-color="white" 
		
			>
				<van-swipe-item 	v-for="(item,index) in bannerData" 
				key="index">
					<img :src="item.banner_img" alt="">
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="content-gn">
			<div class="content-box1"><img src="../../assets/img/one.png" alt="" /></div>
			<div class="content-box2"><img src="../../assets/img/two.png" alt="" /></div>
			<div class="content-box3"><img src="../../assets/img/three.png" alt="" /></div>
			<div class="content-box4"><img src="../../assets/img/four.png" alt="" /></div>
		</div>
		<div class="content-text">
			<div>服务流程</div>
			<div>服务范围</div>
			<div>联系店长</div>
			<div>赔付标准</div>
		</div>
		<div class="content-guize">
			<span class="guize-bt">规则说明</span><span class="guize">关于岭南洗衣所需要知道的一些事项及规则</span>
		</div>
		<div class="content-main">
			<div class="main-img" @click="gocar">
				<img src="../../assets/icon/icon_yy.png" alt="">
				<div class="content">
					<p>预约洗衣</p>
					<p>Appointment</p>
				</div>
			</div>
			<div class="main-img" @click="gocards">
				<img src="../../assets/icon/icon_kq.png" alt="">
				<div class="content">
					<p>红包卡券</p>
					<p>Vouchers</p>
				</div>
			</div>
			<div class="main-img" @click="govip">
				<img src="../../assets/icon/icon_cz.png" alt="">
				<div class="content">
					<p>会员充值</p>
					<p>Prepaid</p>
				</div>
			</div>
			<div class="main-img" @click="goinvite">
				<img src="../../assets/icon/icon_yq.png" alt="">
				<div class="content">
					<p>邀请好友</p>
					<p>Invitation</p>
				</div>
			</div>
		</div>
		<div class="mian-title">
			<span class="title-left">洗护项目</span>
			<span class="title-right">全部服务></span>
		</div>
		<div class="head">
			<div class="wash-service">
				<img class="wash-img1" src="../../assets/img/top2.jpg" mode="" />
				<div class="wash-format">
					<div class="wash-menu">
						<div class="self-support">自营</div>
						<div class="wash-name">限时优惠</div>
					</div>
					<div class="wash-price">99元起</div>
				</div>
			</div>
		</div>
		<div class="swipe-gg">
      <div class="main">
        <div class="card" v-for="(item, index) in clothesData" :key="index">
          <div class="card-top">
            <div class="top-left">
              <img :src="item.type_img" mode="" />
            </div>    
            <div class="top-right">
              <div class="title">
                {{ item.type_name }}
              </div>
              <div class="description1">
                <div class="des-left">
                  <img src="../../assets/img/yifu.png">
                  国际标准化护理
                </div>
                <div class="des-right">
                  <img src="../../assets/img/dizhi.png">
                  心心店500米
                </div>
              </div>
              <div class="description2">
                <div class="free">
                  免费上门取货
                </div>
                <div class="more">
                  更多分类>>
                </div>
              </div>
              <div class="pay">
                已有{{item.type_person_num}}人下单
              </div>
            </div>
          </div>
          <div class="wash-format">
            <div class="wash-menu">
              <div class="self-support">自营</div>
              <div class="wash-name">{{ item.type_indr }}</div>
            </div>
            <div class="wash-price">{{ item.type_price }}起</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Http } from '../../utils/request'

// 定义接口
interface ClothesItem {
  type_img: string;
  type_name: string;
  type_indr: string;
  type_price: string;
  type_person_num: string;
}

const $router = useRouter()
const gocar = () => $router.push('/car')
const gocards = () => $router.push('/cards')
const govip = () => $router.push('/vip')
const goinvite = () => $router.push('/invite')
const active = ref('home')

// 更新 clothesData 类型
const clothesData = ref<ClothesItem[]>([])

const clothes = () => {
  Http('/api/category', 'get', {}).then((res: any) => {
    if (res.status === 200) {
      // 进行类型断言
      clothesData.value = res.data as ClothesItem[];
      console.log(clothesData.value);
    }
  })
}
interface BannerItem {
	banner_id: number;
  banner_img: string;
}
const bannerData = ref<BannerItem[]>([])
const banner = () => {
  Http('/api/banner', 'get', {}).then((res: any) => {
    if (res.status === 200) {
      bannerData.value = res.data;
      console.log(bannerData.value);
    }
  })
}
onMounted(() => {
  clothes();
  banner();
})
</script>

<style lang="less" scoped>
#home-view {
	width: 100%;
	height: 290vh;
	background-color: #ededed;
}

.swipe-titile {
	width: 90%;
	height: 270px;
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
}

.my-swipe .van-swipe-item {
	color: #fff;
	font-size: 20px;
	line-height: 270px;
	text-align: center;
	background-color: #39a9ed;
	img{
		width: 100%;
		height: 100%;
	}
}

.content-gn {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	div {
		width: 16%;
		height: 100px;
		margin: 20px;
		border-radius: 20px;
	}
}

.content-box1 {
	background-color: orange;
}

.content-box2 {
	background-color: rgb(63, 161, 157);
}

.content-box3 {
	background-color: #39a9ed;
}

.content-box4 {
	background-color: #EE82EE;
}

.content-box1 img {
	width: 70%;
	height: 70%;
	margin: 15%;
}

.content-box2 img {
	width: 70%;
	height: 70%;
	margin: 15%;

}

.content-box3 img {
	width: 70%;
	height: 70%;
	margin: 15%;

}

.content-box4 img {
	width: 70%;
	height: 70%;
	margin: 15%;

}

.content-text {
	width: 93%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	div {
		width: 19%;
		height: 50px;
		margin: 20px;
		font-weight: 500;
		text-align: center;


	}
}

.guize-bt {
	color: #fff;
	background-color: rgb(63, 161, 157);
	padding: 10px;
	border-radius: 20px;
	margin-left: 30px;
}

.guize {
	font-size: 26px;
	margin-left: 20px;
	color: #666;
}

.content-main {
	width: 95%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	margin-top: 50px;

	div {
		width: 44%;
		height: 150px;
		margin: 20px;
		background-color: #fff;
		border-radius: 20px;
	}
}

.main-img {
	width: 90%;
	padding: 20px;
	display: flex;

	img {
		width: 100px;
		height: 100px;
	}

	.content {
		height: 80%;
		text-align: center;
		font-size: 25px;
	}
}

.mian-title {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;

	.title-left {
		font-size: 32px;
		font-weight: bold;
	}

	.title-right {
		font-size: 32px;
		font-weight: 500;
		color: rgb(63, 161, 157);
	}

}



.head {
	width: 90%;
	margin: 0 auto;
	height: 400px;
	border-radius: 20px;
	background-color: #fff;
	margin-top: 20px;

	.wash-service {
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 20px;
		background-color: #ffffff;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.wash-img1 {
			height: 300px;
			margin-left: auto;
			margin-right: auto;
			width: 95%;
			margin-top: 20px;
		}

		.wash-format {
			display: flex;
			justify-content: space-between;

			.wash-menu {
				display: flex;

				.self-support {
					height: 45px;
					line-height: 45px;
					background-color: red;
					border-radius: 10px;
					font-size: 30px;
					color: #ffffff;
					margin-top: 20px;
					margin-left: 20px;
				}

				.wash-name {
					margin-top: 20px;
					margin-left: 10px;
				}
			}
		}
	}

	.wash-price {
		margin-top: 15px;
		margin-right: 20px;
		font-size: 40px;
		color: red;
	}
}

.swipe-gg {
	width: 90%;
	margin: 0 auto;
	height: 200px;
	border-radius: 20px;
	background-color: #fff;
	margin-top: 20px;

	.card {
		background-color: white;
		border-radius: 20px;
		box-shadow: 0 0 10px #ccc;
		padding: 25px;
        margin-top: 20px;
		.card-top {
			display: flex;
			justify-content: space-between;

			.top-left {
				width: 250px;
				height: 200px;

				img {
					width: 100%;
					height: 100%;
					border-radius: 20px;
				}
			}

			.top-right {
				width: 350px;
				padding: 15px;

				.title {
					font-size: 30px;
					font-weight: 600;
					margin-bottom: 20px;
				}

				.description1 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20px;

					.des-left {
						font-size: 20px;
						color: #00A299;
						height: 30px;
						line-height: 30px;

						img {
							width: 25px;
							height: 25px;
							vertical-align: top;
							margin-right: -6px;
						}
					}

					.des-right {
						font-size: 20px;
						color: #888;
						height: 30px;
						line-height: 30px;

						img {
							width: 25px;
							height: 25px;
							vertical-align: top;
							margin-right: -6px;
						}
					}
				}

				.description2 {
					display: flex;
					justify-content: space-between;
					margin-top: 10px;

					.free {
						font-size: 23px;
						color: #3AA19E;
						border: 1px solid #3AA19E;
						border-radius: 8px;
					}

					.more {
						background-color: #3AA19E;
						font-size: 23px;
						color: #ffffff;
						border-radius: 8px;
					}
				}

				.pay {
					margin-top: 10px;
					font-size: 23px;
					color: #757B77;
				}
			}
		}

		.wash-format {
			display: flex;
			justify-content: space-between;

			.wash-menu {
				display: flex;

				.self-support {
					height: 45px;
					line-height: 45px;
					background-color: red;
					border-radius: 10px;
					font-size: 30px;
					color: #ffffff;
					margin-top: 20px;
					margin-left: 20px;
				}

				.wash-name {
					margin-top: 20px;
					margin-left: 10px;
				}
			}

			.wash-price {
				margin-top: 15px;
				margin-right: 20px;
				font-size: 40px;
				color: red;
			}
		}
	}

}
</style>
